<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>移动表单设计器</title>
    <link rel="stylesheet" href="/css/workflow/form/mobile/bootstrap.css">
    <link rel="stylesheet" href="/css/workflow/form/mobile/mobile-ui.css">
    <script type="text/javascript" src="/lib/jQuery-File-Upload-master/jquery-1.8.3.min.js" ></script>
    <script type="text/javascript" src="/lib/jquery.form.min.js"></script>
    <script src="/js/base/base.js"></script>
    <script src="/js/workflow/form/jquery-ui.js"></script>
    
    <style>
        .mbui_cell {
            padding-left: 25px;
        }

        .is_show {
            position: absolute;
            left: 5px;
            top: 9px;
        }
    </style>
</head>
<body>
<div class="mbui_container">
    <div class="mbui_header clearfix">
        <h3 class="mbui_header_title pull-left"><font color="gray" size="3">项目任务审批: 移动表单设计器只支持调整控件分组和布局，不支持修改控件属性</font></h3>
        <div class="pull-right">
            <button type="button" class="btn btn-primary mbui_header_save" onclick="saveClick()">保存</button>
        </div>
    </div>
    <div class="mbui_main clearfix">
        <div class="mbui_panel mbui_panel_form">
            <legend class="">移动表单设计器</legend>
            <div class="mbui_group_list ui-sortable">

                <div class="mbui_cells_group" data-group-id="td_group_156412622768683">
                    <div class="mbui_cells ui-sortable">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var formid = $.GetRequest().formId|| '';
    var object = {};
    var arrobject = [];
    function formBoxRender(){
        var str = '';
        $('#formBox .form_item').each(function(i,v){
            var type = $(v).attr('data-type');
            var name = $(v).attr('name');
            var title = $(v).attr('title');
            if(type&&name){
                object[name] = false;
                arrobject.push(name);
                if(type == 'text'){
                   str += '<div class="mbui_cell mbui_cell_text" name="'+ name +'">\
                       <div class="mbui_cell_hd"><label class="mbui_label">'+ title +'</label></div>\
                        <div class="mbui_cell_bd">\
                        <input class="mbui_input" type="text" placeholder="">\
                        </div>\
                        <div class="mbui_cell_layer"><input class="mbui_input is_show" type="checkbox" checked="checked"></div>\
                        </div>';
                }else if(type == 'textarea'){
                    str += '<div class="mbui_cell mbui_cell_textarea" name="'+ name +'">\
                        <div class="mbui_cell_hd"><label class="mbui_label">'+ title +'</label></div>\
                        <div class="mbui_cell_bd">\
                        <textarea class="mbui_textarea" placeholder=""></textarea>\
                        </div>\
                        <div class="mbui_cell_layer"><input class="mbui_input is_show" type="checkbox" checked="checked"></div>\
                        </div>'
                }else if(type == 'select'){
                    str += '<div class="mbui_cell mbui_cell_select" name="'+ name +'">\
                        <div class="mbui_cell_hd"><label class="mbui_label">'+ title +'</label></div>\
                        <div class="mbui_cell_bd"></div>\
                        <div class="mbui_cell_ft">请选择\
                        <span class="mbui_select"></span>\
                        </div>\
                        <div class="mbui_cell_layer"><input class="mbui_input is_show" type="checkbox" checked="checked"></div>\
                        </div>'
                }else if(type == 'radio'){
                    str += '<div class="mbui_cell mbui_cell_radio" name="'+ name +'">\
                        <div class="mbui_radio_list">\
                        <div class="mbui_cell_hd">\
                        <label class="mbui_label">'+ title +'</label>\
                        </div>\
                        <div class="mbui_cell_bd">\
                        <i class="mbui_icon_radiochecked"></i>\
                        </div>\
                        </div>\
                        <div class="mbui_cell_layer"><input class="mbui_input is_show" type="checkbox" checked="checked"></div>\
                        </div>'
                }else if(type == 'checkbox'){
                    str += '<div class="mbui_cell mbui_cell_checkbox" name="'+ name +'">\
                        <div class="mbui_check_list">\
                        <div class="mbui_cell_hd">\
                        <label class="mbui_label">'+ title +'</label>\
                        </div>\
                        <div class="mbui_cell_bd">\
                        <i class="mbui_icon_checked"></i>\
                        </div>\
                        </div>\
                        <div class="mbui_cell_layer"><input class="mbui_input is_show" type="checkbox" checked="checked"></div>\
                        </div>'
                }else if(type == 'listing'){
                    str += '<div class="mbui_cell mbui_cell_listview" name="'+ name +'">\
                        <div class="mbui_cell_hd"><label class="mbui_label">'+ title +'</label></div>\
                        <div class="mbui_cell_bd">\
                        <img src="/img/workflow/form/mobile/listview.png" class="mbui_icon_list" />\
                        </div>\
                        <div class="mbui_cell_layer"><input class="mbui_input is_show" type="checkbox" checked="checked"></div>\
                        </div>'
                }else if(type == 'macros'){
                    str += '<div class="mbui_cell mbui_cell_macro" name="'+ name +'">\
                        <div class="mbui_cell_hd"><label class="mbui_label">'+ title +'</label></div>\
                        <div class="mbui_cell_bd">\
                        <input class="mbui_macro" value="" type="text" placeholder="{宏控件}">\
                        </div>\
                        <div class="mbui_cell_layer"><input class="mbui_input is_show" type="checkbox" checked="checked"></div>\
                        </div>'
                }else if(type == 'calendar'){
                    str += '<div class="mbui_cell mbui_cell_calendar" name="'+ name +'">\
                        <div class="mbui_cell_hd"><label class="mbui_label">'+ title +'</label></div>\
                        <div class="mbui_cell_bd">\
                        <input class="mbui_calendar" value="" type="text" placeholder="YYYY-MM-DD">\
                        </div>\
                        <div class="mbui_cell_layer"><input class="mbui_input is_show" type="checkbox" checked="checked"></div>\
                        </div>'
                }else{
                    str += '<div class="mbui_cell mbui_cell_text" name="'+ name +'">\
                       <div class="mbui_cell_hd"><label class="mbui_label">'+ title +'</label></div>\
                        <div class="mbui_cell_bd">\
                        <input class="mbui_input" type="text" placeholder="">\
                        </div>\
                        <div class="mbui_cell_layer"><input class="mbui_input is_show" type="checkbox" checked="checked"></div>\
                        </div>'
                }

            }

        });
        $('.mbui_cells').html(str);
        $.ajax({
            type: "get",
            url: "/form/getMobileDataSort",
            dataType: 'JSON',
            data: {
                formId: formid
            },
            success: function(res) {
                if(res.flag){
                    var arr = res.obj.split(',');
                    // var str = '';
                    var strArr = [];
                    var arrObj = {};
                    arr.forEach(function (v, i) {
                        var name = v.split('|')[0] || '';
                        var isShow = v.split('|')[1] == 0 ? false : true;
                        if (name && name.indexOf('DATA_') > -1) {
                            object[v] = true;
                            arrObj[name] = isShow;
                            if ($('.mbui_cells .mbui_cell[name=' + name + ']').prop("outerHTML")) {
                                $('.mbui_cells .mbui_cell[name=' + name + ']').find('.is_show').prop('checked', isShow);
                                // str += $('.mbui_cells .mbui_cell[name=' + name + ']').prop("outerHTML");
                                strArr.push($('.mbui_cells .mbui_cell[name=' + name + ']'));
                            }
                        }
                    });
                    arrobject.forEach(function (v, i) {
                        if (v && v.indexOf('DATA_') > -1) {
                            if (!object[v]) {
                                if ($('.mbui_cells .mbui_cell[name=' + v + ']').prop("outerHTML")) {
                                    $('.mbui_cells .mbui_cell[name=' + v + ']').find('.is_show').prop('checked', arrObj[v]);
                                    // str += $('.mbui_cells .mbui_cell[name=' + v + ']').prop("outerHTML");
                                    strArr.push($('.mbui_cells .mbui_cell[name=' + v + ']'));
                                }
                            }
                        }
                    });
                    $('.mbui_cells').html(strArr);
                }
            }
        });
        $('#formBox').remove();
    }

    function makeGroupSortable(){
        $(".mbui_panel_form .mbui_cells").
        sortable({
            opacity: 0.8,
            items: ".mbui_cell",
            placeholder: "magic_placeholder",
            connectWith: ".mbui_cells",
            receive: function(event,ui){
                //剥离helper内联样式
                if(ui.helper){
                    ui.helper.removeAttr('style');
                    //if(ui.helper === ui.item)
                    //return false;
                } else {
                    ui.item.removeAttr('style');
                    //return false;
                }
            },
            stop: function(event,ui){
                ui.item.removeAttr("style");
            }
        });
    }

    function saveClick(){
        var mobileDataSortArr = [];
        var mobileDataSort = '';
        $('.mbui_cells .mbui_cell').each(function(i,v){
            var name = $(v).attr('name');
            var isCheck = $(v).find('.is_show').prop('checked') ? 1 : 0;
            mobileDataSortArr.push(name+'|'+isCheck);
        });
        
        mobileDataSort = mobileDataSortArr.join(',');
        
        $.ajax({
            type: "post",
            url:'/form/updateMobileDataSort',
            dataType: 'JSON',
            data: {
                mobileDataSort: mobileDataSort,
                formId:formid
            },
            success: function(res) {
                if(res.flag){
                    alert('保存成功！');
                }else{
                    alert('保存失败！');
                }
            }
        })
    }
    $(function(){
        $.ajax({
            type: "get",
            url: "/form/formType",
            dataType: 'JSON',
            data: {
                fromId: formid
            },
            success: function(res) {
                var formObj = $('<div>' + res.object.printModel + '</div>');
                $('.pull-left font').text(res.object.formName+': 移动表单设计器可以通过拖动控件调整顺序，可通过勾选控制是否在移动端显示');
                $('body').append('<div id="formBox" style="display: none;">'+res.object.printModel+'</div>');
                formBoxRender();
                makeGroupSortable();
            }
        });
    })
</script>
</body>
</html>